<template>
  <div class="container">
    <div class="openVip-page">
      <div class="header">
        <img class="bg" src="/static/images/header-bg.png" alt="">
        <div class="user">
          <div class="avatar">
            <img class="image" :src="userInfo.avatarUrl" alt="">
          </div>
          <div class="nick">{{userInfo.nickName}}</div>
          <div class="status">{{isVip ? '您好,尊贵会员!' : '尚未开通会员'}}</div>
        </div>
      </div>
      <div class="body">
        <div class="headlines">{{isVip ? '请选择续费时间' : '请选择开通时间'}}</div>
        <ul class="list">
          <li class="item">
            <div class="content">
              <div class="sale">
                <div class="text">立减{{ 50  - system.vip_1}}元</div>
              </div>
              <div class="money">{{system.vipTime1}}天<span class="new">￥{{system.vip_1}}</span><span class="old">￥50</span></div>
              <div class="profile">支付完成后立即开通</div>
            </div>
            <div class="status"></div>
            <div class="button">
              <button class="btn"  @click.stop="handlePay('vip_1')">立即开通</button>
            </div>
          </li>
          <li class="item">
            <div class="content">
              <div class="sale">
                <div class="text">立减{{ 360  - system.vip_2}}元</div>
              </div>
              <div class="money">{{system.vipTime2}}天<span class="new">￥{{system.vip_2}}</span><span class="old">￥360</span></div>
              <div class="profile">支付完成后立即开通</div>
            </div>
            <div class="status">
              <div class="text">推荐</div>
            </div>
            <div class="button">
              <button class="btn"  @click.stop="handlePay('vip_2')">立即开通</button>
            </div>
          </li>
          <li class="item">
            <div class="content">
              <div class="sale">
                <div class="text">立减{{ 720  - system.vip_3}}元</div>
              </div>
              <div class="money">永久<span class="new">￥{{system.vip_3}}</span><span class="old">￥720</span></div>
              <div class="profile">支付完成后立即开通</div>
            </div>
            <div class="status">
              <div class="text">推荐</div>
            </div>
            <div class="button">
              <button class="btn"  @click.stop="handlePay('vip_3')">立即开通</button>
            </div>
          </li>
        </ul>
      </div>
      <div class="footer">
        <div class="title">
          <div class="text">服务特权</div>
        </div>
        <ul class="list">
          <li class="item">1、开通会员后可以在人脉圈无限置顶名片。</li>
          <li class="item">2、开通会员后可以切换多种名片风格。</li>
          <li class="item">3、开通会员后可以选择名片音乐。</li>
          <li class="item">4、开通会员后可以查看访客信息，查看有哪些访客及停留时间。</li>
          <li class="item">5、开通会员后可以赚取月入过万佣金。</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      userInfo: {},
      system:{}
    }
  },

  onShareAppMessage (res) {
    let self = this;
    let url = `${self.$confs.shareUrl}?id=${self.userInfo.id}`;
    return {
      title: self.$confs.shareTitle,
      path: url,
    }
  },

  computed: {
    res () {
      return this.$store.state.res;
    },
  },
  computed: {
    isVip(){
      let time = new Date().getTime();
      let vipTime = this.userInfo.vip_over ? new Date(this.userInfo.vip_over) : 0;

      return time < vipTime ;
    }
  },
  methods: {

    handlePay(type){
      let self = this;
      // console.log(type);
      self.$axios.pay({
        type
      }).then(res => {
        console.log(res);
        if (0 === res.data.code * 1) {
          wx.requestPayment(
            {
              'timeStamp': res.data.data.timeStamp,
              'nonceStr':  res.data.data.nonceStr,
              'package':   res.data.data.package,
              'signType': 'MD5',
              'paySign': res.data.data.paySign,
              'success':function(res){
                if (res.errMsg === 'requestPayment:ok') {
                  self.$axios.getUserinfoById({
                    id : wx.getStorageSync('userInfo').id
                  }).then(function (result) {
                    
                    if (1 * result.data.code === 0) {
                      self.$store.commit('getUserInfo' , result.data.data);
                    }else {
                      self.$toast.show('用户信息更新失败 , 请重新进入!');
                    }


                  })
                }
              },
            })
        }else{
          this.$model.show('数据错误!');
        }
      });

    },

    init(){
      this.userInfo = wx.getStorageSync('userInfo');

      this.$axios.getSys().then( res=>{
        if (0 === res.data.code * 1) {
          this.system = res.data.data;
        }else {
          this.$model.show('数据加载失败!');
        }
      })
    }
  },

  mounted() {
    this.init();
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
